<template>
  <!-- 热门专题 -->
  <div class="hottopic">
    <div class="inner">
      <div class="title">
        {{ data.name }}
      </div>
    </div>
    <div class="hotshow">
      <div
        v-for="l in list"
        :key="l.id"
        class="hotshow-item"
      >
        <img
          :src="l.pc_cover_image"
          alt=""
          class="adv"
          @click="toDetail(l)"
        >
      </div>
    </div>

    <!-- <div class="more">
			<img src="../../assets/img/logo2.png" alt="" @click="topList(data)">
		</div> -->
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {
    data: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      list: "",
    };
  },
  mounted() {
    let param = {
      page: 1,
      limit: 4,
    };

    this.$api.home.topic(param).then((res) => {
      if (res.code == 1) {
        this.list = res.data.data;
        console.log("list", this.list);
      }
    });
  },
  methods: {
    toDetail(item) {
      this.$router.push({ path: "/topicDetail?id=" + item.id });
    },
    topList(item) {
      this.$router.push({ path: "/topic?id=" + item.id });
    },
  },
};
</script>

<style scoped lang="scss">
.hottopic {
  // padding: 0 10rem;  // new
  display: flex;
  flex-direction: column;
  margin-top: 2.19rem;
  & > img {
    width: 100%;
    object-fit: contain;
    cursor: pointer;
  }
  .inner {
    padding: 0 10rem;
    margin-bottom: 1.87rem;
    .title {
      width: 11.25rem;
      height: 3.44rem;
      background: rgba(0, 0, 0, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.5rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(234, 234, 234, 1);
    }
  }

  .more {
    height: 2.5rem;
    background: rgba(0, 0, 0, 1);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 1.44rem;
    img {
      width: 7.38rem;
      cursor: pointer;
    }
  }
}
</style>
